<template>
  <div class="container">
    <div class="container-in">
      <div style="height: 15px;"></div>
      <!-- <div style="display: flex;align-items: center;margin-left: 5%;">
        <div>{{ doneDate }} {{ doneTime }}</div>
      </div> -->
      <!--  -->
      <div class="card">
        <div style="width: 90%;margin-left: 5%;">
          <div style="height: 10px;"></div>
          <div style="font-size: 18px;font-weight: 500;">日期设置</div>
          <div style="height: 10px;"></div>
          <u-line color="#f1f1f1"></u-line>
          <div style="height: 10px;"></div>
          <div>
            <div>日期</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <picker mode="date" :value="date" @change="bindDateChange">
                <input style="height: 42px;" v-model="date" placeholder="请选择日期" type="text" disabled>
              </picker>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <div>开始时间</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <picker mode="time" start="09:01" end="21:01" :value="time" @change="bindTimeChange">
                <input disabled v-model="time1" style="height: 42px;" placeholder="请选择时间" type="text">
              </picker>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <div>结束时间</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <picker mode="time" start="09:01" end="21:01" :value="time" @change="bindTimeChanges">
                <input disabled v-model="time2" style="height: 42px;" placeholder="请选择时间" type="text">
              </picker>
            </div>
          </div>
          <div style="height: 10px;"></div>
        </div>
        <div style="height: 10px;"></div>
      </div>
      <div style="height: 15px;"></div>
      <div class="card" v-for="(item, indexs) in listArr">
        <div style="width: 90%;margin-left: 5%;">
          <div style="height: 10px;"></div>
          <div style="font-size: 18px;font-weight: 500;">收运信息</div>
          <div style="height: 10px;"></div>
          <u-line color="#f1f1f1"></u-line>
          <div style="height: 10px;"></div>
          <div>
            <div>有机质</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <input style="height: 42px;" type="text" v-model="item.organicType" disabled>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <div>预估重量（吨）</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <input style="height: 42px;" placeholder="请输入" type="text" v-model="item.appointWeight">
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <div>车辆类型</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <!-- <input style="height: 42px;" v-model="item.vehicleType" disabled type="text"> -->
              <picker @change="(event) => changeCarType(event, indexs)" :value="index" :range="carType">
                <input placeholder="请选择" style="height: 42px;" v-model="item.vehicleTypeName" disabled type="text">
              </picker>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div v-show="item.vehicleType == 1">
            <div>自派车选择</div>
            <div style="height: 15rpx;"></div>
            <div class="borders">
              <picker @change="(event) => bindPickerChange(event, indexs)" :value="index" :range="carList">
                <input placeholder="请选择" style="height: 42px;" v-model="item.licenseNumber" disabled
                  @change="changeInput(item, indexs)" type="text">
              </picker>
            </div>
          </div>
          <div v-show="item.vehicleType == 1" style="height: 10px;"></div>
        </div>
        <div style="height: 10px;"></div>
        <div class="btns" @click="submit">提交</div>
        <div style="height: 20px;"></div>
      </div>
      <!--  -->
    </div>
  </div>
</template>
<script>
import { farmAddorder, farmgetCar } from '../api/api';
import { organicType } from '../../common/example'
export default {
  data() {
    return {
      time1: '',
      time2: '',
      date: '',
      show: false,
      index: 0,
      listArr: [
        {
          organicType: '',
          appointWeight: '',
          vehicleType: '',
          licenseNumber: '',
          driverName: '',
          driverPhone: '',
          vehicleTypeName: ''
        }
      ],
      carList: [],//车辆列表
      carFilterList: [],//车辆搜索
      doneTime: '',
      doneDate: '',
      carType: ['收运车', '自派车']
    };
  },
  methods: {
    bindTimeChange: function (e) {
      this.time1 = e.detail.value
    },

    bindTimeChanges: function (e) {
      this.time2 = e.detail.value
    },
    bindDateChange: function (e) {
      this.date = e.detail.value
    },
    changeInput(i, index) {
      console.log(i);
      console.log(index);
    },
    ifValue(arr) {
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        if (obj.appointWeight === '' || obj.vehicleType === '') {
          return false; // 如果name或者type为空，则返回false
        }
        if (obj.vehicleType != '0' && obj.licenseNumber === '') {
          return false; // 如果type不为0且car为空，则返回false
        }
      }
      return true; // 数组中所有对象都通过验证，返回true
    },
    submit() {
      console.log(this.listArr, 'listArr');
      // if(this.ifValue(this.listArr)){
      farmAddorder({
        appointTime: this.date + ' ' + '00:00:00',
        appointTimeRange: this.time1 + '-' + this.time2,
        appointDetailList: this.listArr
      }).then(res => {
        console.log(res.data, '新增预约');
        if (res.data.code == 200) {
          uni.showToast({
            title: res.data.msg,
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack({ delta: 1 })
          }, 1000)
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
      // }else{
      //   uni.showToast({
      //     title:'请输入完整',
      //     icon:'none'
      //   })
      // }

    },
    cancel() {
      uni.navigateBack({ delta: 1 })
    },
    confirm() {
      this.show = false;
    },
    changeCarType(event, index) {
      console.log(event, index);
      console.log(event.detail.value);
      this.listArr[index].vehicleType = event.detail.value;
      if (event.detail.value == 0) {
        this.listArr[index].vehicleTypeName = '收运车';
      } else {
        this.listArr[index].vehicleTypeName = '自派车'
      }
      console.log(this.listArr[index].vehicleTypeName, '1');

    },
    bindPickerChange(event, indexs) {
      console.log('Selected value:', event.detail.value);
      console.log('Index:', indexs);
      // 处理选中的值和索引
      console.log(this.carFilterList[event.detail.value], 'pick牵连数据');
      const selectObj = this.carFilterList[event.detail.value];
      this.listArr[indexs].licenseNumber = selectObj.licenseNumber;
      this.listArr[indexs].driverName = selectObj.driverName;
      this.listArr[indexs].driverPhone = selectObj.driverPhone;
    },
    typeList() {
      organicType().then(res => {
        console.log(res.data, '有机质类型列表');
        if (res.data.code == 200) {
          // this.listArr=res.data.data.map((organicType,index)=>({...this.listArr[index],organicType}))
          this.listArr = res.data.data.map((organicType, index) => ({
            organicType, appointWeight: '',
            vehicleType: '',
            licenseNumber: '',
            driverName: '',
            driverPhone: '',
          }))
          console.log(this.listArr, 'this.listArr');

        }
      })
    }
  },
  onShow() {
    this.typeList();
    this.doneDate = uni.getStorageSync('doneDate');
    this.doneTime = uni.getStorageSync('doneTime')
    // 获取车辆
    farmgetCar().then(res => {
      console.log(res.data);
      if (res.data.code == 200) {
        this.carList = res.data.data.map((item) => item.licenseNumber);
        this.carFilterList = res.data.data;
        console.log(this.carList, 'carList');
      }
    })
  }
};
</script>
<style lang="scss">
.card {
  background: #fff;
  border-radius: 10px;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.container-in {
  width: 90%;
  margin-left: 5%;
}

.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #E5EDE3;
}

.looks {
  padding: 3px;
  color: #fff;
  background: #C1E1C9;
  border-radius: 5px;
  border: 0.5px solid #46a164;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5F9F6A;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  margin-left: 2.5%;
}

.line {
  background: #1A512C;
  width: 7rpx;
  height: 35rpx;
}

.con {
  width: 95%;
  margin-left: 2.5%;
  padding: 10px;
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  background-color: #E5EDE3;
  border-radius: 10px;
  // height: 50vh;
}

.title {
  font-size: 20px;
  font-weight: 500;
}

.borders-min {
  border: 1px solid #1A512C;
  border-radius: 5px;
  text-align: center;
}

.btn {
  background: #B9E2C7;
  color: #46A164;
  width: 40%;
  // margin-left: 5%;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: #46A164;
}

.btns {
  background: #000000;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.borders {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}
</style>